<?php
require 'includes/master_include.php';

$user = 'rsudworth';
if(array_key_exists('user',$_GET)){
	$user = array_key_exists('user',$_GET);
}
$artists_a2z = library_artists($user, array_key_exists('refresh',$_GET) || array_key_exists('user',$_GET));

$artist;
if(array_key_exists('artist',$_GET)){

	$albums = library_albums($user,$_GET['artist']);
	if($albums){
		$artist = $albums[0]['artist'];
	}
}



?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
	body{
		font-size:62.5%;
		margin:auto;
		background-color:#333;
		color:#EEE;
	}
	ul{
		padding:0;
		margin:0px;
	}
	ul li{
			padding:0;
		margin:0px;
		list-style:none;
	}
	a{
		color:#FFF;
	}
	div.container{
		font-size:1.2em;
		width:90%;
		font-family: tahoma, arial, sans-serif;
		float:left;
		padding:0 1em;
	}
	ul.a2z, div.content{
		float:left;
		
	}
	div.content{
		width:70%;
	}
	ul.a2z{
		width:25%;
		font-weight:bold;
		font-size:1.2em;
	}
	ul.a2z li{
		padding: .1em 0em;
	}
	ul.artists{
		
		font-weight: normal;
		font-size:0.9em;
	}
	ul.links{
		position: absolute;
		bottom:0;
		left:0;
	}	
	ul.links li{
		display:inline;
	}
	div.content div.item{
		float:left;
		width:30%;
		background-color:#000;
		padding: 5px;
		width: 116px;
		height: 116px;
		background-repeat:none;
		background-color:#000;
		position:relative;
	}
	div.content div.item h3{
		padding-top:0;
		margin-top:0;
		color: #0C0;
		background-color:#FFF;
		display: none;
	}
	ul.artists{
		display:none;
	}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('div.item').hover(
			function(){
				$(this).find('h3').show();
			},
			function(){
				$(this).find('h3').hide();
			}
			
		);
		$('a.letter').click(function(e){
			var visible = $(this).siblings().is(":visible");

			$('ul.artists').hide();
			if(!visible){
				$(this).siblings().slideDown();
			}
		});
		$('a.all').click(function(e){
			$('ul.artists').show();

		});
		
		$('ul.artists li a').click(function(e){
					e.preventDefault();
			var href = this.href;
			if(href.indexOf('?') > 0){
				href = href.substring(href.indexOf('?'));
			}

			$("div.content").load('artist.php'+href,'',content_callback);

			

		});		
	});
	
	function content_callback(responseText, textStatus, XMLHttpRequest) {
	  this; // dom element

	  $('div.item').hover(
			function(){
				$(this).find('h3').show();
			},
			function(){
				$(this).find('h3').hide();
			}
			
		);
	}
	
	
</script>
</head>
<body>
<div class="container">
	<h1>Music Library</h1>
	<div class="body">
		<ul class="a2z">
			<li ><a href="#" class="all">All</a></li>
		<?php foreach($artists_a2z as $initial => $artists): ?>
			<li ><a href="#" class="letter"><?php print $initial; ?></a>
			<ul class="artists">
		<?php foreach($artists as $name => $mbid): ?>
				<li><a href="?artist=<?php print urlencode($name) ?>"><?php print htmlentities($name); ?></a> <a href="spotify:search:<?php print urlencode($name) ?>">S</a></li>
		<?php endforeach; ?>
			</ul>
			</li>
		<?php endforeach; ?>
		</ul>
		<div class="content">
			<?php if(isset($artist)): ?>
				<h2><?php print htmlentities($artist['name']) ?></h2>
				<?php foreach($albums as $i => $album): ?>
					<div class="item" style="background-image: url(<?php print htmlentities($album['image']['large']) ?>);">
						<h3><?php print htmlentities($album['name']) ?></h3>
<ul class="links"><li><a href="spotify:search:<?php print urlencode($album['name']) ?>">Spotify</a></li>
<li><a href="<?php print $album['url'] ?>">LastFM</a></li></ul>
						
						
					</div>
				<?php endforeach; ?>
			<?php endif; ?>
		</div>
	</div>
</div>
</body>
</html>
